<template>
	<div class="shopcar-container">
		<div class="goods-list">
			<!--商品列表区域-->
			
			<div class="mui-card" v-for = '(item,i) in goodslistself' :key='item.id'>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<mt-switch v-model='$store.getters.getGoodsSelected[item.id]' @change='selectedChanged(item.id,$store.getters.getGoodsSelected[item.id])'></mt-switch>
						<img src="http://58pic.ooopic.com/58pic/17/43/54/79S58PICFWc.jpg" alt="" />
						<!--<img src="item.thumb_path" alt="" />-->
						<div class="info">
							<h1>{{item.title}}</h1>
							<p>
								<span class='price'>￥{{item.price}}</span>
								<numbox :initCount='$store.getters.getGoodsCount[item.id]' :goodsid='item.id'></numbox>
								<!--
									如何从购物车中获取商品的数量呢
									1.我们可以先创建一个空的对象，然后循环购物车中所有的商品数据，
									把当前循环这条商品的id作为对象的属性名，count作为对象的属性值，这样，当把所有的商品循环一遍，就会得到一个对象
									{88:1,89:2}
								-->
								<a href="javascript:;" @click.prevent='remove(item.id,i)'>删除</a>
							</p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--结算区域-->
		<div>
			<div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner allCount">
						<div class="left">
							<p>总计(不含运费)</p>
							<p>已勾选商品 <span class="red">{{$store.getters.getGoodsCountAndAmount.count}}</span>件，总价 <span class="red">￥{{$store.getters.getGoodsCountAndAmount.amount}}</span></p>
						</div>
						<mt-button type='danger' size='small'>去结算</mt-button>
					</div>
				</div>
			</div>
		</div>
		<p>{{$store.getters.getGoodsSelected}}</p>
	</div>
</template>

<script>
	import numbox from '../subcomponents/Shopcar-numbox.vue'
	export default{
		data() {
			return {
				goodslist: [], //购物车中所有商品的数据,这里提供的api接口获取不到 只能自己重新获取
				goodslistself:[]  //购物车中所有商品的数据
			}
			
		},
		created() {
			this.getGoodsList();
			this.getGoodsListself();
		},
		methods:{
			getGoodsListself(){
				this.goodslistself = this.$store.state.car
				console.log('this.goodslistself-->',this.goodslistself)
			},
			getGoodsList() {
				//1.获取到购物车中所有商品的id，然后拼接出一个字符串，用逗号分隔
				var idArr = []
				this.$store.state.car.forEach(item =>idArr.push(parseInt(item.id)))
				console.log(idArr.join(','))
				//如果购物车中没有商品，则直接返回，不需要请求数据接口，否则会报错
				if(idArr.length<=0){
					console.log(111)
					return ;
				}
				//获取购物车商品列表 神奇
//				this.$http.get('api/goods/getshopcarlist/'+idArr.join(',')).then(result=>{
//					if(result.body.status === 0){
//						this.goodslist = result.body.message;
//						console.log('this.goodslist ',this.goodslist)
//				    }
//			    }
				this.$http.get('api/goods/getshopcarlist/'+ idArr.join(',')).then(result => {
					if(result.body.status == 0){
						this.goodslist = result.body.message;
						console.log('this.goodslist-->',this.goodslist)
					}else{
						console.log('this.goodslist-->数据获取失败',)
					}
				})
				
		   },
		   remove(id,index){
		   	 //点击删除，把商品从store中根据传递的id删除
		   	 //同时把当前最贱中的goodlistself中的商品删除
		   	 this.goodslistself.splice(index,1)
		   	 this.$store.commit('removeFormCar',id)
		   },
		   selectedChanged(id,val){
		   	//每当点击开关，将最新的 开关状态，同步到store中
		   	console.log(id,'----',val)
		   	this.$store.commit('updateGoodsSelected',{id:id,selected:val})
		   }
		},
		components:{
			numbox
		}
	}
</script>

<style lang="scss" scoped>
.shopcar-container{
	background-color: #eee;	
	overflow: hidden;
	.goods-list{
		.mui-card-content-inner{
			display: flex;
			align-items: center;
		}
		img{
			width: 60px;
			height: 60px;
		}
		h1{
			font-size: 13px;
		}
		.info {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.price {color:red;}
		}
	}
	
	.allCount{
		display: flex;
		justify-content: space-between;
		align-items: center;
		.red {
			color: red;
			font-weight: bold;
			font-size: 16px;
		}
	}
}
</style>